/* 让页面两个块装元素并列排放，并且沾满整个屏幕 */
*{
    padding: 0px;
    margin: 0px;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}

aside{
    width: 25vw;
    height: 100vh;
    background-image: url("../img/register-left.png");
    background-repeat: no-repeat;
    background-size: 25vw ,100vh;

}

article{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 75vw;

}
.title,.nav{
    width: 30%;
    height: 100%;
    padding-top: 30px;


}
.content{
    width: 40%;
    height: 100%;

}
.nav ul{

    list-style: none;
    color: #999999;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: smaller;
}
.nav ul li:hover{
    color: #F67E3D;
}

.main{
    background-color: #ffffff;
    height: 70vh;
    margin-top: 100px;
    padding-top:40px;
    padding-left:20px;
    box-shadow: 0px 0px 20px #eeeeee;
    border-radius: 10px;

}
.footer{
    margin-top: 30px;
    font-size: small;
    color:  #999999;
    width:800px;
}
.login-title,.register-title{
    display: inline;
    font-size: x-large;
    font-weight: bold;
    margin: 10px;
}
.unclicktitle{
    color: #999999;
}
.red-line{
    width:50px;
    height:5px;
    background-color: #F67E3D;
    margin-left: 10px;
    border-radius: 5px;

}
.animToRegeist{
    animation: toRegeist 0.1s linear forwards ;
}
.animToLogin{
    animation: toLogin 0.1s linear alternate forwards ;
}

@keyframes toRegeist {
    from{
        transform: translate(0px);
    }
    to{
        transform: translate(70px);
    }

}
@keyframes toLogin {
    from{
        transform: translate(70px);
    }
    to{
        transform: translate(0px);
    }

}
.login,.register{
    width: 90%;

    margin: 5px auto;
    height: 40%;
}
.login-content{
   width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}
#account,#pwd,#login-submit{
    width: 80%;
    height: 40px;
    margin: 0px auto;
    font-size: medium;
    border: 0px;
    background-color: #efefef;
    border-radius: 5px;
    padding: 10px;

}
#account:focus,#pwd:focus,#register-phone:focus,#register-msgcode:focus,#short-msg:focus,#pwd1:focus,#pwd2:focus{
    border: 1px solid red;
    box-shadow: 0px 0px 10px #F6A33E;
    outline: none;
}
#login-submit{
    height: 60px;
    width: calc(80% + 20px);
    background-color: #F67E3D;
    color: white;
    font-weight: 600;

}
#login-submit:hover,#short-msg-btn:hover,#pwd-btn:hover{
    background-color: #F6A33E;
}
.other{
    color: #F67E3D;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.other-login{
    margin-top: 10px;
}


.nodisplay{
    display: none;
}
.import-info{
    color: black;
}
.problem{
    color: #F67E3D;
    margin-top: 40px;
}
.register-main,.input-short-msg,.input-pwd{
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
}

#register-btn,#register-msgcode,#register-phone,#short-msg,#short-msg-btn,#pwd1,#pwd2,#pwd-btn{
    height: 50px;
    width: 100%;
    margin-top:10px;
    border-radius: 5px;
    background-color: #eeeeee;
    border:0px;
    font-size: medium;
    padding: 5px;

}
#register-msgcode,#short-msg{
    width:60%;
}

#register-btn,#short-msg-btn {
    background-color: #F67E3D;
    color: white;
}
#msgcode{
    width:30%;
    height:50px ;
    margin-top:10px;


}
.msg-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#short-tip{
    font-size: small;


}















